<!DOCTYPE html>
<html>
<head>

	<title></title>
	<meta charset="utf-8"> 
</head>
<style type="text/css">
	.shou{
		border: 1px solid  #87CEFA;
		width: 400px;
		height: 600px;
		margin: 0 auto;
		border-radius: 10px;
		font-size: 22px;
  
        }
 .poot{
  width: 400px;
  height: 600px;

    
	}
	.fanhui{
		    width: 30px;
			height: 30px;
			margin-top: bolder;
			float: left;
			

	}
    .koot{
        position: relative;
        margin: 0;
       padding: 0;
       background-color: #87CEFA;
       color: #fff;
      text-align: center;
      height: 50px;
      line-height: 50px;
      border-radius: 10px;
    }
    .boor{
      padding: 10px;
    }
    .ckloo{
    	padding: 16px;
      

    }
  .ckloo button{
  	height: 35px;
    background-color: #87CEFA;
    color: #fff;
    border-radius: 5px;
     
  }

</style>
<body>
	<div class="shou">
	  <div class="poot">
	  	
	  	<h3 class="koot"><img id="dopp" class="fanhui" src="img/bout.png">请选择当前的省份</h3>
	  	
	  	   <div class="ckloo" style="position: relative;top: 0px;left: 0px;">
	  	   	<div class="shengpen trea">
	  	   		<button>广西壮族自治区</button>
	  	   		<button>广东</button>
	  	   		<button>湖南</button>
	  	   		<button>湖北</button>
	  	   		<button>四川</button>
	  	   		<button>上海</button>
	  	   		<button>北京</button>
	  	   		<button>江西</button>
	  	   		<button>天津</button>

            </div>
	  	   	<div class="shiji trea" style="position: absolute;left: 400px;top: 10px;width: 250px;border: 1px solid  #87CEFA;height: 200px;display: none;">
	  	   		<button>柳州</button>
	  	   		<button>南宁</button>
	  	   		<button>河池</button>
	  	   		<button>深圳</button>
	  	   		<button>佛山</button>
	  	   		<button>惠州</button>


	  	   	</div>
	  	   	<div class="quxian trea" style="position: absolute;left: 650px;top: 10px;width: 250px;border: 1px solid  #87CEFA;height: 200px;display: none;">
                <button>柳北区</button>
                <button>柳南区</button>
                <button>城中区</button>
                <button>鱼峰区</button>
                <button>西乡塘</button>
                <button>青秀区</button>
                <button>江南区</button>

	  	   	</div>


	  	   </div>

        </div>
		
    </div>
<script type="text/javascript" src="jso/jquery3.1.js"></script>
<script type="text/javascript">
	$('#dopp').click(function(){
		  //获取城市的状态
      var shijio=$('.shiji').css('display');
      var quxiano=$('.quxian').css('display');

        if(quxiano=='block' && shijio=='block'){
        $('.quxian').hide();
        return;
       
        }
         if(quxiano=='none' && shijio=='block'){
            $('.shiji').hide();
         }
         console.log('-----1')
        });

        function showqu(btn){
        	var cid=$(btn).val();

        $('.shengpen').show();
        $('.quxian').show();
        $('.shiji').show();

        $.get('json/qu.json',function(res){
        	 $('.quxian').empty();
            for (var i = 0; i < res.length; i++){
               if(cid==res[i].pid){
            	var btn='<button value="'+res[i].id+'">'+res[i].name+'</button>';
            	$('.quxian').append(btn);
            }
            } 
         
        })

        }


	function showoh(btn){
      var pid=$(btn).val();
      
     $('.shengpen').show();
     $('.quxian').hide();
     $('.shiji').show();

     $.get('json/shi.json',function(res){
     	$('.shiji').empty();
       for (var i = 0; i < res.length; i++) {
       	if(pid==res[i].pid){
       	var btn='<button onclick="showqu(this)" value="'+res[i].id+'">'+res[i].name+'</button>';
       	$('.shiji').append(btn);
       }

       }
       });

	}

	function inoppb(){
        $('.shengpen').empty();

        $.get('json/sheng.json',function(res){
           for (var i = 0; i<res.length;i++){
             var btn='';
            btn='<button onclick="showoh(this)" value="'+res[i].id+'">'+res[i].name+'</button>';
             $('.shengpen').append(btn);

           }
        });

	};
	
inoppb();



</script>





</body>
</html>